// import  React from 'react';
import React,{Component} from 'react';
import {changeTime} from './tool';

//组件  状态  响应（驱动）  视图

// class Content extends React.Component{
//     constructor(){
//         super();
//         this.state = {time: new Date().toLocaleTimeString()}
//     }
// }

//类组件
class Content extends Component{
    constructor(props){
      super(props);//props参数一般不使用
      // console.log(this.props);
      // this.state = {
      //   title: '列表标题',
      //   time: new Date().toLocaleTimeString()
      // }
      // setInterval(()=>{
      //   this.setState({time: new Date().toLocaleTimeString()})
      // },1000)
      this.state = {topics:[]}
    }
    //挂载成功后执行且执行一次
    componentDidMount(){
      fetch('https://cnodejs.org/api/v1/topics')
        .then(res=>res.json())
        .then(res=>{

            //原生写法
            // let list = document.querySelector('#list');
            // for(let i = 0; i<res.data.length; i++){
            //     let li = document.createElement("li");
            //     li.innerHTML = res.data[i].title;
            //     list.appendChild(li);
            // }
        //React写法
        //   console.log(res);
          this.setState({topics:res.data})
        })
    }
    shouldComponentUpdate(){
      console.log('shouldUpdate');
      return true
    }
    render(){
      const {topics} = this.state;
      return <div>
        <h2>共有{topics.length}条帖子</h2>
    {/* 原生 */}
        {/* <ul id="list">

        </ul> */}
    {/* React写法 */}
        <ul>
          {
            // this.state.topics.map(item=><li key={item.id}>{item.title}</li>);
            topics.map(topic=>{
              return <li key = {topic.id}>
                <img src = {topic.author.avatar_url}/>
                <span>{topic.reply_count}</span>
                {topic.title}
                <span>{changeTime(topic.last_reply_at)}</span>
              </li>
            })
          }
        </ul>
      </div>
    }
}
  //什么时候不用设置新的状态？
  //1、变化的内容可以由现有的状态经过分析计算得来
  //2、变化的内容是从props得来的
export default Content;